<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ONS</title>
    <link rel="icon" href="/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/antd/4.16.13/antd.min.css">

    <style>
      @font-face {
        font-family: "LexendDeca";
        src: url("font/LexendDeca-Regular.woff2") format("woff2");
        font-weight: normal;
        font-style: normal;
        font-display: swap;
      }
      main {
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 0px;
        background-image: url("./bg2.jpg");
        background-size: cover; /* 背景图片自动调整以覆盖整个页面 */
        background-repeat: no-repeat; /* 背景图片不重复 */
        background-position: center center; /* 背景图片居中 */
      }
  
      .back {
        width: 100vw;
        height: 76px;
        background: #8b097e;
        display: flex;
        align-items: center;
      }
  
      .back img {
        width: 40px;
        margin-left: 30px;
      }
  
      .text {
        color: #fff;
        font-family: "LexendDeca";
        font-size: 24px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        position: absolute;
        right: 50%;
        transform: translateX(50%);
      }
      .content {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        padding: 51px 0 49px;
      }
      .title_img {
        width: 208px;
        height: 72px;
        flex-shrink: 0;
        margin-bottom: 52px;
      }
  
      input,
      select,
      button {
        width: 444px;
        height: 58px;
        flex-shrink: 0;
        border-radius: 29px;
        border: 1px solid #fff;
        background: #3d0d43;
        padding: 0 30px;
        box-sizing: border-box;
        font-size: 18px;
        background: #3d0d43;
        color: #fff;
        margin-bottom: 18px;
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
      }
      select {
        margin-bottom: 0 !important;
      }
  
      .error {
        border: 1px solid red;
        box-shadow: 0 0 5px rgba(215, 76, 106, 0.6);
      }
      .custom-select {
        position: relative;
        display: flex;
        justify-content: end;
        align-items: center;
        margin-bottom: 18px;
      }
      .del {
        position: absolute;
        margin-right: 20px;
      }
  
      .but {
        border-radius: 27px;
        background: #ef49de;
        border: none;
        margin-top: 21px;
      }
      input:focus,
      select:focus {
        border-color: #66afe9;
        outline: none;
        box-shadow: 0 0 5px rgba(102, 175, 233, 0.6);
      }
      select option {
        background-color: #ef49de;
        border: 1px solid;
      }
      .ifu {
        width: 508px;
        color: #fff;
        font-family: "LexendDeca";
        font-size: 24px;
        font-style: normal;
        font-weight: 500;
        line-height: 35px; /* 145.833% */
        margin: 32px 0 27px;
      }
      .verify {
        width: 508px;
        color: #fff;
        font-family: "LexendDeca";
        font-size: 18px;
        font-style: normal;
        font-weight: 400;
        line-height: 27px; /* 150% */
      }
    </style>
  </head>
  <body>
    
    <main>
      <div class="back">
        <a href="./index.html"> <img src="./back.png" /></a>
        <span class="text">Account deletion</span>
      </div>

      <div class="content">
        <img src="./bg_title.png" class="title_img" />

        <div class="custom-select">
          <select id="mySelect">
            <option value="email">Email</option>
            <option value="mobile">Mobile</option>
          </select>
          <div class="del"><img src="./down.png" class="" /></div>
        </div>
        <input type="text" id="myInput" placeholder="please enter" required />

        <button class="but" onclick="handleClick()">
          Confirm Account Deletion
        </button>
        <div class="ifu">
          If you wish to delete your account and all associated data, please follow these steps:
        </div>
        <div class="verify">
          1. Verify your login email on ONS.<br />2. Enter your email.<br />3.
          Click the "Confirm Account Deletion" button.<br />Note: Once the deletion is successful, your account will be deactivated, and all your data will be removed after 3 months.
        </div>
      </div>
    </main>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
    <!-- 引入 Ant Design JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/antd/4.16.13/antd.min.js"></script>

    <script>
      const { message } = antd;
      // 获取下拉框元素
      var selectElement = document.getElementById("mySelect");
      var inputElement = document.getElementById("myInput");

      function handleClick() {

        var selectedValue = selectElement.value;
        var inputValue = inputElement.value;

        let values;
        if (selectedValue == "email") {
          values = {
            email: inputValue,
          };
        } else {
          values = {
            mobile: inputValue,
          };
        }
        // 输入框失去焦点时的事件处理函数
        inputElement.addEventListener("blur", function () {
          if (inputElement.value.trim() !== "") {
            inputElement.classList.remove("error");
          } else {
            inputElement.classList.add("error");
          }
        });
        if(inputValue.trim() === ""){
          message.error('please enter your '+selectedValue)
        }else {
          //测试：http://112.124.66.71:9011
          //线上：https://api.oldpang.com/ons/api/users/email/remove
          fetch("https://api.oldpang.com/ons/api/users/email/remove", {
            method: "POST",
            headers: {
              Accept: "application/json",
              "Content-Type": "application/json",
            },
            body: JSON.stringify({
              ...values,
            }),
          }).then(() => {
            message.success("Your account has beensuccessfully deleted");
          })
        } 
      }
    </script>
  </body>
</html>
